<template>
	<view class="page">
		<view class="head">
			<view class="head-time"  @click="show = true">
				<text>{{startDeta}}</text>
			</view>
			<image class="headbg" src="/static/img/icon_bonus_bg.png" mode=""></image>
			<view class="headText-box">
				<text>我的分红</text>
				<!-- <text>总金额</text> -->

			</view>
			<view class="headText-box-number">
				{{number.parsePrice(monthTotalAmt)}}元
			</view>
		</view>
	<!-- 	<view class="" @click="relue()">
			规则
		</view> -->
		<view class="concent-box">
			<view class="concent" v-for="(item,index) in goods">
				<view class="concent-title">
					{{item.name}}
				</view>
				<!-- @click="toRoster(item.type)" -->
				<view class="concent-img" >
					<text></text>
					<!-- <image src="/static/img/ic_next_double.png" mode="widthFix"></image> -->
				</view>
				<view class="concent-Syue-text">
					<!-- 人均分红 -->
				</view>
				<view class="concent-benyue-number">
					{{number.parsePrice(item.amt)}}
				</view>
				<view class="" style="height: 15px;">
					
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	const api = require('../../config/api');
	const util = require('../../utils/util');
	import number from '../../utils/number.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				number: number, //声明number属性并赋值为引入的number模块
				monthTotalAmt: '',
				goods: [],
				startDeta:currentDate,
			}
		},
		onLoad() {

		},
		onShow() {
			this.getbonusIndex();

		},
		//#ifdef APP-PLUS
		onNavigationBarButtonTap: function(e) {
			// console.log(e);
			this.relue()
		},
		//#endif
		methods: {
			getDate(type) {
			           const date = new Date();
			           let year = date.getFullYear();
			           let month = date.getMonth() + 1;
					      let day = date.getDate();
						
			           if (type === 'start') {
			               year = year - 60;
			           } else if (type === 'end') {
			               year = year + 2;
			           }
					   // 如果当前是1月，则上个月是上一年的12月
					     if (month === 0) {
					       month = 12;
					       year -= 1; // 年份减1
					     } else {
					       month -= 1; // 否则，月份减1
					     }
			           month = month > 9 ? month : '0' + month;
			           day = day > 9 ? day : '0' + day;
			           return `${year}-${month}`;
			       },
			toRoster(e){
				uni.navigateTo({
					url: '/pages/dividend/dividendRoster?type='+e
				})
			},
			relue() {
				uni.navigateTo({
					url: '/pages/dividend/dividendRelue'
				})
			},
			async getbonusIndex() {
				const res = await util.request(api.bonusIndexUrl, {}, 'GET')
				console.log(res)
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				} else {
					this.monthTotalAmt = res.data.monthTotalAmt
					this.goods = res.data.list
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		// height: 100%;
		background-color: #3579F2;
	}

	.head {
		position: relative;
		padding: 10px;
	}

	.headbg {
		z-index: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}

	.headText-box {
		position: relative;
		z-index: 1;
		width: 200px;
		height: 200px;
		margin: 0 auto;
		margin-top: 30px;
		background-image: url('../../static/img/icon_bonus_circular.png');
		background-size: 100% 100%;
		text-align: center;
		color: #fff;
		font-size: 25px;
		font-weight: 600;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;

	}

	.headText-box-number {
		position: relative;
		z-index: 1;
		margin: 0 auto;
		margin-top: -40px;
		width: 240px;
		height: 45px;
		color: #fff;
		font-size: 20px;
		font-weight: 600;
		border: 5px solid #97BBFB;
		border-radius: 20px;
		text-align: center;
		line-height: 40px;
		background-color: #3579F2;
	}
	.concent-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-left: 15px;
		margin-right: 15px;
	}
	.concent {
		width: 48%;
		
		margin-bottom: 10px;
		background-color: #fff;
		text-align: center;
	}
.concent-box .concent:last-child {
    width: 100%;
   margin-bottom: 10px;
   background-color: #fff;
   text-align: center;
}

	.concent-title {
		background-color: #D2E1FC;
		height: 40px;
		color: #7FACFB;
		font-size: 14px;
		text-align: center;
		line-height: 40px;
	}

	.concent-benyue-text {
		margin-top: 20px;
		color: #666666;
		font-size: 12px;
	}

	.concent-benyue-number {
		margin-top: 6px;
		color: #7FACFB;
		font-size: 18px;
		margin-bottom: 20px;
	}

	.concent-line {
		height: 1px;
		background-color: #F9F9F9;
		width: 100%;
	}

	.concent-img {
		padding-top: 10px;
		padding-left: 15px;
		padding-right: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 10px;
		}
	}

	.concent-Syue-text {
		margin-top: 3px;
		color: #666666;
		font-size: 12px;
	}

	.concen-peopre {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.concen-peopre-item {
		flex: 1;
		text-align: center;
	}

	.peopre-item-title {
		color: #666666;
		font-size: 12px;
	}

	.peopre-item-number {}
	.head-time{
		left: 15px;
		top: 0px;
		z-index: 5;
		position: absolute;
		padding-left: 15px;
		// background-color: #fff;
		height: 40px;
		color: #000;
		font-weight: 600;
		font-size: 16px;
		text-align: left;
		line-height: 40px;
	}
</style>